import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import React, { useState } from 'react';

import { useNavigate, useLocation } from "react-router-dom"

type MenuItem = Required<MenuProps>['items'][number];

// function getItem(
//     label: React.ReactNode,
//     key: React.Key,
//     icon?: React.ReactNode,
//     children?: MenuItem[],
// ): MenuItem {
//     return {
//         key,
//         icon,
//         children,
//         label,
//     } as MenuItem;
// }
// const items: MenuItem[] = [
//     getItem('栏目, 1', '/page1', <PieChartOutlined />),
//     getItem('栏目  2', '/page2', <DesktopOutlined />),
//     getItem('User', 'page3', <UserOutlined />, [
//         getItem('Tom', '3'),
//         getItem('Bill', '4'),
//         getItem('Alex', '5'),
//     ]),
//     getItem('Team', 'page4', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//     getItem('Files', '9', <FileOutlined />),
// ];

// 登录请求到数据之后,就可以跟 items这个数组进行匹配
const items: MenuItem[] = [
    {
        label: '栏目1',
        key: '/page1',
        icon: <PieChartOutlined />
    },
    {
        label: '栏目2',
        key: '/page2',
        icon: <DesktopOutlined />
    },
    {
        label: '栏目3',
        key: 'page3',
        icon: <UserOutlined />,
        children: [
            {
                label: '栏目 301',
                key: '/page3/page301'
            },
            {
                label: '栏目 302',
                key: '/page3/page302'
            },
            {
                label: '栏目 303',
                key: '/page3/page303'
            }
        ]
    },
    {
        label: '栏目4',
        key: 'page4',
        icon: <TeamOutlined />,
        children: [
            {
                label: '栏目 401',
                key: '/page4/page401'
            },
            {
                label: '栏目 402',
                key: '/page4/page402'
            }
        ]
    },
    {
        label: '栏目5',
        key: '/page5',
        icon: <FileOutlined />
    }
]

const Comp: React.FC = () => {

    const navigateTo = useNavigate()
    const currentRoute = useLocation()


    const menuClick = (e: { key: string }) => {
        // console.log("点击了菜单", e.key);

        // 点击跳转到对应的路由 编程式导航跳转 
        navigateTo(e.key)
    }

    // 拿着currentRoute.pathname跟items数组的每一项的child的key进行比对,如果找到了 就要他上一级的key
    // 这个key给到openKeys数组的元素 ,作为初始值

    let firstOpenkyes: string = "";
    // 在这里进行比对 find
    function findKey(obj:{key:string}) {
        return obj.key === currentRoute.pathname
    }


    // 要对比多个children
    for (let i = 0; i < items.length; i++) {
        if (items[i]!['children'] && items[i]!['children'].length > 0 && items[i]!['children'].find(findKey)) {
            firstOpenkyes = items[i]!.key as string
            break;
        }
    } 


    // 设置展开项的初始值
    const [openKeys, setOpenKeys] = useState([firstOpenkyes]);
    const handlePoenChange = (keys: string[]) => {
        // 展开和回收某项菜单的时候执行这里的代码 
        console.log(keys);  // keys 是一个数组,记录了当前哪一项是展开的(用key来记录)
        // 把这个数组修改成最后一项 只要一项是展开的
        setOpenKeys([keys[keys.length - 1]]);
    }
    return (
        <Menu
            theme="dark"
            // defaultSelectedKeys 表示当前选中项的样式的key``
            defaultSelectedKeys={[currentRoute.pathname]}
            mode="inline"
            // 菜单项数据
            items={items}
            onClick={menuClick}
            // 某项菜单展开和回收的事件
            onOpenChange={handlePoenChange}
            // 当前展开的key数组
            openKeys={openKeys}
        />
    )
}

export default Comp; 